<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>
<!-- 
    我们从5.2正确响应式原理中可以看到Vue不管有多少层级，属性都会有getter和setter，setter中都会调用重新解析模板的方法===>生成虚拟dom===》转为真实dom渲染到页面
       1.目前结论
            （1）Vue监测对象时，只有现有的对象属性发生变化才会重新解析模板,除此之外添加属性、删除属性、都不能引起Vue的监测，也不会重新解析模板，也不会生成虚拟dom，也不会更新页面内容
 
 
        2.为什么我们添加属性不能引起Vue响应监测？
                因为Vue初始化的时候已经过去，之后添加的属性都不是响应式的

        3.如何添加响应式属性？？
                Vue.set(this.student,'sex','女')
            或者this.$set(this.student,'sex','女')


        -->

<body>
    <div id="root">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <h2>所属区域：{{quyu}}</h2>
        <hr>

        <button @click="addSex">添加性别</button>

        <h2>学生姓名：{{student.name}}</h2>
        <h2>学生性别：{{student.sex}}</h2>
        <h2>学生年龄：真实{{student.age.rAge}},对外{{student.age.sAge}}</h2>

        <h2>朋友们</h2>
        <ul>
            <li v-for="f in student.friends" :key="f.name">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script>
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        new Vue({
            el: "#root",
            data: {
                name: "西部世界",
                address: "北京",
                student: {
                    name: "西部世界",
                    age: {
                        rAge: 25,
                        sAge: 18,
                    },
                    friends: [{
                            name: "名师",
                            age: 18
                        },
                        {
                            name: "小冯",
                            age: 18
                        },
                        {
                            name: "小勇",
                            age: 18
                        },
                        {
                            name: "磊子",
                            age: 18
                        }
                    ]
                },
            },
            methods: {
                addSex() {
                    // Vue.set(this.student, 'sex', '男')  //Vue.set()第一个参数不允许是vue实例vm也不允许是data根目录，必须是data下的某个对象
                    this.$set(this.student, 'sex', '男')
                }
            }

        })
    </script>


</body>

</html>